<script setup lang="ts">
// import type { VideoItem } from '@/types/video'
defineProps<{
  item: VideoItem
}>()
</script>

<template>
  <NuxtLink class="v-card" :to="`/video/${item.aid}`">
    <div class="card">
      <div class="card-img">
        <img class="pic" :src="item.pic" :alt="item.title" />
      </div>
      <div class="count">
        <span><i class="iconfont icon-lock"></i>{{item.stat.view}}万</span>
        <span><i class="iconfont icon-dianzan"></i>{{item.stat.danmaku}}万</span>
      </div>
    </div>
    <p class="title text-ellipsis-2">{{item.title}}</p>
  </NuxtLink>
</template>

<style lang="scss" scoped>
/*视频卡片*/
.v-card{
  width: 50%;
  padding: 0 5px 10px;
  .card{
    position: relative;
    background: #f3f3f3 url(@/assets/images/default.png) center no-repeat;
    background-size: 36%;
    border-radius: 2px;
    overflow: hidden;
    .card-img{
      .pic{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .count{
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px;
      font-size: 12px;
      color: #fff;
      background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1));
    }
  }
  .title{
    font-size: 14px;
    color: #333;
    margin-top: 5px;
  }
}
</style>
